<template>
  <div>
    <h4>{{ person }}</h4>
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>薪资: {{ job.j1.salary }}K</h2>
    <button @click="name += '!'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "Demo",
  setup() {

    toRef


    // 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
    // 语法：const name = toRef(person,'name')
    // 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
    // 扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

    let person = reactive({
      name: "张三",
      age: 25,
      job: {
        j1: {
          salary: 6,
        },
      },
    });

    // return {
    //   person,
    //   name: toRef(person, 'name'),
    //   age: toRef(person, 'age'),
    //   salary: toRef(person.job.j1, 'salary')
    // };


    // let x = toRefs(person);
    // console.log(x);

    return {
      person,
      ...toRefs(person)
    }
  },
};
</script>